<template>
  <el-dialog
    class="dialog"
    :title="title"
    v-model="dialogFormVisible"
    append-to-body
  >
    <generate-form
      v-if="formConf.fields.length"
      ref="generateFormRef"
      :form-conf="formConf"
      :page-form-model="formModel"
      :is-sub-form="true"
      :key="formParseKey"
    />
    <template #footer>
      <el-button @click="dialogFormVisible = false">{{ $t("common.cancel") }}</el-button>
      <el-button
        type="primary"
        @click="handleUpdate"
      >
        {{ $t("common.confirm") }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AddOrUpdate">
import { defineAsyncComponent, provide } from "vue";
import { useAddOrUpdate } from "@/views/formgen/components/FormItem/SubForm/useAddOrUpdate";
import { IS_SUB_FORM_KEY, USER_FORM_STATE_KEY } from "@/views/formgen/components/GenerateForm/types/constants";

const GenerateForm = defineAsyncComponent(() => import("../../GenerateForm/GenerateForm.vue"));

provide(IS_SUB_FORM_KEY, true);

const emit = defineEmits(["submit"]);

const props = defineProps({
  fields: {
    type: Array,
    default: () => []
  }
});

const { formParseKey, dialogFormVisible, formModel, title, formConf, generateFormRef, handleUpdate, showDialog, userFormStore } =
  useAddOrUpdate(emit, props);

provide(USER_FORM_STATE_KEY, userFormStore);

defineExpose({
  showDialog
});
</script>

<style scoped>
@media screen and (max-width: 500px) {
  .dialog.body {
    width: 100%;
  }
}

/*去除upload组件过渡效果*/
:deep(.el-upload-list__item) {
  transition: none !important;
  -webkit-transition: none !important;
}

:deep(.el-upload-list__item-name) {
  transition: none !important;
  -webkit-transition: none !important;
}
</style>
